<template>
  <div id="playMusic" :style="`background-image:url(${psrc})`">
    <!--播放页绑定动态的背景图-->
    <div class="white"></div>
    <div class="round">
      <!-- //动态旋转图片 -->
      <img :src="psrc" alt>
    </div>
    <h2 class="name" style="font-weight:900">歌名:{{name}}</h2>

    <!-- //播放按钮 -->
    <audio ref="mmAudio" :src="src" controls autoplay="true"></audio>
    <button @click="prev" class="el-icon-caret-left"></button>
    <button @click="play" class="el-icon-video-play"></button>
    <button @click="next" class="el-icon-caret-right"></button>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>
  

import { music, songDetails,jump,rankingSong,getSingerSingle } from "@/api";//引入接口方法
export default {
  data() {
    return {
      id:'',
      ids:"",
      songData: [], //背景图数组
      songName: [], //歌名
      list: [], //歌曲数组
      index: 0 //当前歌曲下标
    };
  },

  computed: {
    src() {
      return this.list[this.index]; // 当前播放歌曲
    },
    psrc() {
      return this.songData[this.index]; //当前歌曲的背景图
    },
    name() {
      return this.songName[this.index];
    }
  },

  created() {
    this.getMusic({ id: this.$route.params.id });//歌曲地址传值调用接口
    this.getSinger({ ids: this.$route.params.id });//传值获取歌曲图片
    this.getJump({id:this.$route.params.rid})//传值拿到所有的id
    this.getsingsingle({id:this.$route.params.rid})
    this.getRankingSong({id:this.$route.params.id})
    // console.log( this.$route.params.id)

    // this.getLanguage();
  },
  methods: {
    getMusic(data) {
      //获取歌曲地址
      music(data).then(res => {
        this.list.push(res.data.data[0].url); //将所有得到的数组添加到list数组中
        //   console.log(this.list)
      });
    },
    getSinger(data) {
      songDetails(data).then(res => {
        //获取歌曲图片
        this.songData.push(res.data.songs[0].al.picUrl);
        this.songName.push(res.data.songs[0].name);
      });
    },
    getJump(data) {
      jump(data).then(res => {
        //跳转到精品歌单详情
        var newData = res.data.privileges;
        for (var i = 0; i < newData.length; i++) {
          //遍历数组
          var newId = newData[i].id;
          this.getMusic({ id: newId }); //调用播放列表所有的id集合
          this.getSinger({ ids: newId }); //调用播放列表所有歌曲的背景图
        }
      });
    },

    // //获取排行榜id
    getRankingSong(data) {
      // console.log(data);
      rankingSong(data).then(res => {
        // console.log(res);
      });
    },
    // getLanguage(){
    //     // console.log(res)
    //     singLanguage().then(res=>{
    //         console.log(res)
    //     })
     getSinger(data){

        songDetails(data).then(res=>{//获取歌曲图片
           this.songData.push(res.data.songs[0].al.picUrl)
         this.songName.push(res.data.songs[0].name)
        })

        },
        getJump(data){
           
            jump(data).then(res=>{//跳转到精品歌单详情
               var newData=res.data.privileges
                for(var i=0;i<newData.length;i++){//遍历数组
                   var newId=newData[i].id
                   this.getMusic({id:newId})//调用播放列表所有的id集合
                   this.getSinger({ids:newId})//调用播放列表所有歌曲的背景图
                  
                }
                
            })
        },
        getsingsingle(data){
          getSingerSingle(data).then(res=>{
             var nsingData=res.data.hotSongs
              for(var i=0;i<nsingData.length;i++){//遍历数组
                   var nsingId=nsingData[i].id
                   this.getMusic({id:nsingId})//调用播放列表所有的id集合
                   this.getSinger({ids:nsingId})//调用播放列表所有歌曲的背景图
                  
                }
          })
        },


        // //获取排行榜id
        // getRankingSong(data){
        //   // console.log(data)
        //   rankingSong(data).then(res=>{
            
        //       console.log(res);
        //   })
        // },
        // getLanguage(){
        //     // console.log(res)
        //     singLanguage().then(res=>{
        //         console.log(res)
        //     })

    // },
    prev() {
      //上一曲
      let index = this.index - 1;
      if (index < 0) {
        index = this.list.length - 1;
      }
      this.index = index;
      this.$nextTick(() => this.$refs.mmAudio.play());
    },
    play() {
      //暂停/播放
      this.$nextTick(() =>
        this.$refs.mmAudio.paused
          ? this.$refs.mmAudio.play()
          : this.$refs.mmAudio.pause()
      );
    },
    next() {
      //下一曲
      let index = this.index + 1;
      if (index === this.list.length) {
        index = 0;
      }
      this.index = index;
      this.$nextTick(() => this.$refs.mmAudio.play());
    }
  }
};
</script>
